<template>
  <div class="patient-details">
    <Header></Header>
    <main class="main">
      <div class="main-left">
        <div class="top">
          <div class="top-t">
            <div style="flex: 1; display: flex">
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;
                  margin-left: 5px;
                "
              >
                <div style="font-size: 1.2vw; flex: 1 1 auto">
                  {{ patientDetails.yyPatient.ptnName }}（{{
                    patientDetails.yyPatient.sex
                  }}）
                </div>
                <span>{{ patientDetails.yyPatient.bedNo }}</span>
              </div>
            </div>
            <div style="flex: 1; display: flex">
              <div style="display: flex; margin-right: 20px">
                <div style="display: flex; flex-direction: column; margin-right: 5px">
                  <div :style="{ width: '8px', background: '#fff', height: '50%' }"></div>
                  <div
                    :style="{ width: '8px', background: '#0043be', height: '50%' }"
                  ></div>
                </div>
                <div style="display: flex; flex-direction: column">
                  <div style="flex: 1 1 auto; font-size: 1.2vw">
                    {{ patientDetails.yyPatient.blood.split("/")[0] }}
                  </div>
                  <span>收缩压</span>
                </div>
              </div>
              <div style="display: flex">
                <div style="display: flex; flex-direction: column; margin-right: 5px">
                  <div :style="{ width: '8px', background: '#fff', height: '50%' }"></div>
                  <div
                    :style="{ width: '8px', background: '#0043be', height: '50%' }"
                  ></div>
                </div>
                <div style="display: flex; flex-direction: column; position: relative">
                  <div style="flex: 1 1 auto; font-size: 1.2vw">
                    {{ patientDetails.yyPatient.blood.split("/")[1] }}
                  </div>
                  <span>舒张压</span>
                  <span class="up"></span>
                </div>
              </div>
            </div>
          </div>
          <div class="top-b">
            <div>
              <span>身高：{{ patientDetails.yyPatient.high }}cm</span>
              <span>体重：{{ patientDetails.yyPatient.weight }}kg</span>
            </div>
            <div>
              <span>血型：</span>
              <span>入院时间：{{ patientDetails.yyPatient.adTime }}</span>
            </div>
            <div>
              <span>既往病史：</span>
            </div>
            <div>
              <span>诊断信息：{{ patientDetails.yyPatient.diagnosis }}</span>
            </div>
          </div>
        </div>
        <div class="bottom"></div>
      </div>
      <div class="main-right">
        <div class="sign">
          <div class="sign-item">
            <img src="../../assets/images/temperature.svg" alt="" />
            <span>体温{{ patientDetails.yyPatient.tempe }}</span>
          </div>
          <div class="sign-item">
            <img src="../../assets/images/breathe.svg" alt="" />
            <span>呼吸{{ patientDetails.yyPatient.breath }}</span>
          </div>
          <div class="sign-item">
            <img src="../../assets/images/pulse.svg" alt="" />
            <span>脉搏{{ patientDetails.yyPatient.pulse }}</span>
          </div>
          <div class="sign-item">
            <img src="../../assets/images/oxygen.svg" alt="" />
            <span>血氧</span>
          </div>
          <div class="sign-item">
            <img src="../../assets/images/sugar.svg" alt="" />
            <span>血糖{{ patientDetails.yyPatient.xuetang }}</span>
          </div>
        </div>
        <div class="advice">
          <p>医嘱信息</p>
          <el-table :data="patientDetails.yyDoctorOrderList" border>
            <el-table-column prop="doctor_order" label="医嘱名称" align="center" min-width="50" />
            <el-table-column prop="orderType" label="医嘱类型" align="center" min-width="50" />
            <el-table-column prop="releaseTime" label="开嘱时间" align="center" />
          </el-table>
        </div>
      </div>
    </main>
    <div class="back">
      <el-button type="primary" @click="$router.back()">返回</el-button>
    </div>
  </div>
</template>

<script setup>
import Header from "../layout/header.vue";
import {
  get_whiteboardPatientDetailByHospitalNo,
  get_whiteboardPatientDetailByBedNo,
} from "@/apis/patientDetails.js";
import { ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();

const info = route.query; //路由参数

let patientDetails = ref({
  yyDoctorOrderList: [],
  yyPatient: {
    adTime: "",
    bedNo: "",
    blood: "",
    diagnosis: "",
    high: "",
    ptnName: "",
    sex: "",
  },
}); //患者详情信息

if (info.hospitalNo) {
  getPatientByHospitalNo(info.hospitalNo);
} else {
  getPatientByBedNo(info.bedNo);
}

//通过住院号获取患者详情
async function getPatientByHospitalNo(hospitalNo) {
  let res = await get_whiteboardPatientDetailByHospitalNo({ hospitalNo });
  patientDetails.value = res.data;
}

//通过病床号获取患者详情
async function getPatientByBedNo(bedNo) {
  let res = await get_whiteboardPatientDetailByBedNo({ bedNo });
  patientDetails.value = res.data;
}
</script>

<style lang="scss" scoped>
.patient-details {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  background-image: url("../../assets/images/layout-bg.png");
  background-repeat: no-repeat;
  background-size: 104% 105%;
  background-position: center;
  background-attachment: fixed; /* 背景图片固定 */
  min-height: 100vh; /* 至少为视口高度 */
  .main {
    flex: 1;
    padding: 5vh 1vw;
    display: grid;
    grid-template-columns: 5fr 4fr;
    gap: 2vw;
    .main-left {
      background: #fff;
      display: flex;
      flex-direction: column;
      padding: 2vh 1vw;
      .top {
        flex: 1;
        background: #e8f2fc;
        padding: 1vh 1vw;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-bottom: 1vh;
        .top-t {
          display: flex;
          .up {
            position: absolute;
            display: inline-block;
            width: 0;
            height: 0;
            border-left: 0.4vw solid transparent;
            border-right: 0.4vw solid transparent;
            border-top: 0.5vw solid transparent;
            border-bottom: 0.6vw solid #0043be;
            left: 1.7vw;
          }
        }
        .top-b {
          > div {
            display: flex;
            span {
              flex: 1;
              margin-top: 1.5vh;
            }
          }
        }
      }
      .bottom {
        flex: 2;
        background-image: url("../../assets/images/patient-info-l.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
      }
    }
    .main-right {
      background: #fff;
      display: flex;
      flex-direction: column;
      padding: 2vh 1vw;
      .sign {
        flex: 1;
        background: linear-gradient(#e0ecfa 0%, #e7f1fb 55%, #eef5fc 100%);
        margin-bottom: 1vh;
        padding: 3vh 2vw;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 1.5vw;
        .sign-item {
          color: #fff;
          border-radius: 5px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          img {
            width: 3vw;
            height: 4vh;
            margin-bottom: 1vh;
          }
        }
        .sign-item:first-child {
          background: linear-gradient(#bff0ff, #41b8ff);
        }
        .sign-item:nth-child(2) {
          background: linear-gradient(#fee9ee, #ff5d7f);
        }
        .sign-item:nth-child(3) {
          background: linear-gradient(#ecdeff, #a25bff);
        }
        .sign-item:nth-child(4) {
          background: linear-gradient(#82e1a5, #00e95c);
        }
        .sign-item:last-child {
          background: linear-gradient(#bbcdff, #3071ff);
        }
      }

      .advice {
        flex: 5;
        background: linear-gradient(180deg, #e0ecfa 0%, #e7f1fb 55%, #eef5fc 100%);
        padding: 0.6vw;
        :deep(.el-table) {
          margin-top: 1.5vh;
          font-size: 0.8vw;
          th.el-table__cell.is-leaf {
            background: #f6f6f6;
          }
        }
      }
    }
  }
  .back {
    position: absolute;
    left: 1vw;
    top: 9vh;
  }
}
</style>
